<template>
  <div>
    <a-row>
      <!-- 左边 -->
      <a-col :span="16">
        <a-steps
          :current="stepsStore.current"
          :items="stepsStore.items"
        ></a-steps>
        <Diagnosis v-show="stepsStore.current == 0" />
        <Prescribe v-show="stepsStore.current == 1" />
        <Propose @handData="handData" v-show="stepsStore.current == 2" />
      </a-col>

      <!-- 右边 -->
      <a-col :span="8">
        <div class="user_info">
          <!-- 用户信息 -->
          <div class="user_item" v-if="isUserInfo">
            <div class="avatar">
              <a-image
                style="border-radius: 8px"
                :width="100"
                :src="patientInfo.employee.avatar"
              />
            </div>
            <a-descriptions bordered size="small">
              <a-descriptions-item :span="3" label="用户姓名">{{
                patientInfo.employee.name
              }}</a-descriptions-item>
              <a-descriptions-item :span="3" label="用户性别">{{
                patientInfo.employee.gender == '1' ? '男' : '女'
              }}</a-descriptions-item>
              <a-descriptions-item :span="3" label="联系电话">{{
                patientInfo.employee.phone
              }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <a-empty :image="simpleImage" v-else />
          <!-- 预约的用户列表 -->
          <div class="user_list">
            <span>预约列表</span>
            <a-list
              class="list"
              item-layout="horizontal"
              :data-source="userList.data"
              size="small"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #title>
                      <a href="#">{{ item.employee.name }}</a>
                    </template>
                    <template #description>
                      <div class="staus">
                        <div class="test">
                          <a-tag
                            color="blue"
                            v-if="item.reservation.status == 1"
                            >已预约</a-tag
                          >
                        </div>
                        <div class="btn">
                          <p
                            class="handle diagnosis"
                            style="margin-right: 10px"
                            @click="handleItem(item)"
                          >
                            诊断
                          </p>

                          <a-popconfirm
                            title="确认将此用户过号吗?"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="overNumber(item)"
                          >
                            <p class="handle over">过号</p>
                          </a-popconfirm>
                        </div>
                      </div>
                    </template>
                    <template #avatar>
                      <a-avatar :src="item.employee.avatar" />
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import Diagnosis from './Diagnosis.vue'
import Prescribe from './Prescribe.vue'
import Propose from './Propose.vue'
import { apiGetUserList, apiOverUser } from '@/api/Service/api'
import { userConsuliation } from '@/stores/ConsulitationStore'
import { userUserStore } from '@/stores/UserStore'
import { Empty, message } from 'ant-design-vue'
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const store = userUserStore()
const stepsStore = userConsuliation()

const isClearData = ref(false)

//展示的用户数据
const isUserInfo = ref(false)
//患者信息
const patientInfo = ref<any>(null)
const userList = reactive<any>({
  data: [],
})
const userInfo = ref<any>()
//最后一步提交的数据 讲用户数据体也提交过去
const handData = async () => {
  if (patientInfo.value == null) {
    return message.error('未选择患者')
  }
  stepsStore.oneNext({
    doctorId: userInfo.value.empId,
    communityId: userInfo.value.communityId,
    userId: patientInfo.value.employee.empId,
    reservationId: patientInfo.value.reservation.reservationId,
  })
  try {
    await stepsStore.addRecord()
    message.success('就诊成功')
    //回归一开始的就诊
    stepsStore.backTreatment()
    //重新获取患者数据
    isUserInfo.value = false
    getUserList()

    patientInfo.value = null
  } catch (error: any) {
    message.error(error)
  }
}

//对患者进行过号
const overNumber = async (item: any) => {
  try {
    await apiOverUser(item.reservation.reservationId)
    // 过号之后重新调整页面列表
    isUserInfo.value = false
    getUserList()
    patientInfo.value = null
  } catch (error) {
    message.error('发生错误')
  }
}

//获取医生预约记录
const getUserList = async () => {
  let res = await apiGetUserList({
    empId: userInfo.value.empId,
    type: '3',
  })

  userList.data = res.data
}

const handleItem = (item: any) => {
  isUserInfo.value = true
  patientInfo.value = item
}

onMounted(() => {
  userInfo.value = store.employeeInfo
  getUserList()
})
</script>

<style lang="less" scoped>
.user_info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .user_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .user_list {
    flex: 1;
    width: 100%;
    margin: auto;
    .list {
      height: 100%;
      overflow: scroll;
      box-sizing: border-box;
      overflow-x: hidden;
      // padding-right: 20px;
      cursor: pointer;
      .staus {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn {
          display: flex;
          .handle {
            color: #fff;
            width: 60px;
            height: 30px;
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 40px;
          }
          .diagnosis {
            background: #04aaa5;
          }
          .over {
            background: rgb(227, 23, 23);
          }
        }
      }
    }
  }
}
</style>
